import React, { Component } from 'react';
import {  AppRegistry,StyleSheet, View, ScrollView,Text,
    Image, Dimensions, TextInput,
    PixelRatio } from 'react-native';
import ImgPanel from '../componments/home/ImgPanel'



const scrollButtonList = require('../assets/source').homeButtonList


export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { activePage: 0 };

    }
    render() {
        let { height, width } = Dimensions.get('window')
        var itemArr = [];
        var radioArr = [];
        //遍历创建组件
        for (var i = 0; i < scrollButtonList.length; i++) {
            itemArr.push(
                <ImgPanel key={i} buttonlist={scrollButtonList[i]}></ImgPanel>
            );
            radioArr.push(
                <View key={i} style={{ height: 6, width: 6, borderWidth: 1, borderColor: '#555',
                    borderRadius: 3, backgroundColor: this.state.activePage == i ? '#555' : 'transparent' }}></View>
            )
        }
        let styles = StyleSheet.create({
            readioList: {
                paddingBottom: 10,
                justifyContent: 'center',
                flexDirection: 'row',
                alignItems: 'center'
            }
        });
        return (

            <View style={{ flex: 1 }}>

                <ScrollView>

                    <View style={{ backgroundColor: '#f0f0f0', flexDirection: 'column', alignItems: 'center' }}>
                        <ScrollView
                            horizontal={true}
                            pagingEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
                        >
                            {itemArr}
                        </ScrollView>
                        <View style={styles.readioList}>{radioArr}</View>
                    </View>
                    <View style={{flex:1}}>

                        <View style={styles1.flex}>
                            <View style={[styles1.containertop,styles1.sbu_red,styles1.topradius]}>
                                <View style={[styles1.item,styles1.center]}>
                                    <Text style={styles1.font}>酒店</Text>

                                </View>
                                <View style={[styles1.item,styles1.lineLeftRight]}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>海外酒店</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>特价酒店</Text>
                                    </View>
                                </View>
                                <View style={styles1.item}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>团购</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>名宿·短租</Text>
                                    </View>
                                </View>
                            </View>

                            <View style={[styles1.containermiddle,styles1.sbu_blue]}>
                                <View style={[styles1.item,styles1.center]}>
                                    <Text style={styles1.font}>机票</Text>

                                </View>
                                <View style={[styles1.item,styles1.lineLeftRight]}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>火车票</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>特价机票</Text>
                                    </View>
                                </View>
                                <View style={styles1.item}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>汽车票·船票</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>专车·租车</Text>
                                    </View>
                                </View>
                            </View>

                            <View style={[styles1.containermiddle,styles1.sbu_green]}>
                                <View style={[styles1.item,styles1.center]}>
                                    <Text style={styles1.font}>旅游</Text>

                                </View>
                                <View style={[styles1.item,styles1.lineLeftRight]}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles.font}>目的地攻略</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>周边游</Text>
                                    </View>
                                </View>
                                <View style={styles1.item}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>邮轮旅行</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>定制旅行</Text>
                                    </View>
                                </View>
                            </View>

                            <View style={[styles1.containermiddle,styles1.sbu_yellow,styles1.bottomradius]}>
                                <View style={styles1.item}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>景点·玩乐</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>礼品卡</Text>
                                    </View>
                                </View>
                                <View style={[styles1.item,styles1.lineLeftRight]}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>美食林</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>WiFi·电话卡</Text>
                                    </View>
                                </View>
                                <View style={styles1.item}>
                                    <View style={[styles1.center,styles1.flex,styles1.lineCenter]}>
                                        <Text style={styles1.font}>购物·外汇</Text>
                                    </View>
                                    <View style={[styles1.center,styles1.flex]}>
                                        <Text style={styles1.font}>保险·签证</Text>
                                    </View>
                                </View>
                            </View>



                        </View>

                    </View>



                </ScrollView>

            </View>


        );
    }
    //一帧滚动结束调用
    onScrollAnimationEnd(e) {
        //求当前页码:通过屏幕偏移量/屏幕宽度
        var currentPage = Math.floor(e.nativeEvent.contentOffset.x / 390 + 0.4);
        //更新状态机
        this.setState({
            activePage: currentPage
        });
    }
}
//样式定义

const styles1=StyleSheet.create({

    sbu_red:{
        backgroundColor: '#FA6778',
        borderColor:'#FA6778',
    },

    sbu_blue:{
        backgroundColor: '#3D98FF',
        borderColor:'#3D98FF',
    },

    sbu_green:{
        backgroundColor: '#5EBE00',
        borderColor:'#5EBE00',
    },

    sbu_yellow:{
        backgroundColor: '#FC9720',
        borderColor:'#FC9720',
    },
    containertop:{
        marginTop:5,
        marginLeft:5,
        marginRight:5,
        height:84,
        flexDirection:'row',
        padding:2,
    },
    topradius:{
        borderTopLeftRadius:5,
        borderTopRightRadius:5
    },
    bottomradius:{
        borderBottomLeftRadius:5,
        borderBottomRightRadius:5
    },
    containermiddle:{
        marginTop:5,
        marginLeft:5,
        marginRight:5,
        height:84,
        flexDirection:'row',
        padding:2,
        backgroundColor:'#FF0067',
    },
    secondmenu:{
        marginTop:5,
        marginLeft:5,
        marginRight:5,
        backgroundColor:'white'
    },
    item:{
        flex:1,
        height:80,
    },
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    flex:{
        flex:1
    },
    font:{
        color:'#fff',
        fontSize:14,
    },
    secondfont:{
        color:'black',
        fontSize:10,
    },
    lineLeftRight:{
        borderLeftWidth:1/PixelRatio.get(),
        borderRightWidth:1/PixelRatio.get(),
        borderColor:'#fff'
    },

    lineCenter:{
        borderBottomWidth:1/PixelRatio.get(),
        borderColor:'#fff'
    },
    menulineRight:{
        borderRightWidth:0.5/PixelRatio.get(),
        borderColor:'#d0d0d0'
    },

    menulineCenter:{
        borderBottomWidth:1/PixelRatio.get(),
        borderColor:'#d0d0d0'
    },
    image:{
        width:30,
        height:30,
        marginTop:5
    },
    secondimage:{
        width:20,
        height:20,
        marginBottom:4
    },
    wrapper: {
        height:80,
    },


});


AppRegistry.registerComponent('Home', () => Home);
